import { NavBar, DatePicker } from 'antd-mobile'
import { useEffect, useMemo, useState } from 'react'
import './index.scss'
import classNames from 'classnames'
import _ from 'lodash'
import dayjs from 'dayjs'
import { useSelector } from 'react-redux'
import DailyBill from './components'


const Month = () => {
  const [datevisible, setDateVisible] = useState(false)
  const [currentDate, setCurrentDate] = useState(
    () => {
      return dayjs(new Date()).format('YYYY')
    }
  )
  const [currentYearList, setCurrentYearList] = useState([])


  const billList = useSelector(state => state.bill.billList)
  //按月分组
  const yearGroup = useMemo(() => {
    return _.groupBy(billList, item => dayjs(item.date).format('YYYY'))
  }, [billList])


  const yearResult = useMemo(() => {
    //收入 支出 结余
    const income = currentYearList.filter(item => item.type == 'income').reduce((a, c) => a + c.money, 0)
    const pay = currentYearList.filter(item => item.type == 'pay').reduce((a, c) => a + c.money, 0)
    return {
      income,
      pay,
      total: pay + income
    }
  }, [currentYearList])
  //初始化的时候，显示当前月数据
  useEffect(() => {
    const nowDate = dayjs(new Date()).format('YYYY')
    //边界值控制
    if (yearGroup[nowDate])
      setCurrentYearList(yearGroup[nowDate])
  }, [yearGroup])


  const onConfirm = (date) => {
    setDateVisible(false)
    const formatDate = dayjs(date).format('YYYY')
    setCurrentDate(formatDate)
    setCurrentYearList(yearGroup[formatDate])
  }
  //当前月按日分组
  // const dayGroup = useMemo(() => {
  //   const groupDate =_.groupBy(billList, item => dayjs(item.date).format('YYYY-MM'))
  //   const keys=object.keys(groupDate)
  //   return{
  //     groupDate,keys
  //   } 
  // }, [billList])
const monthGroup=useMemo(()=>{
  const groupDate=_.groupBy(currentYearList,(item)=>dayjs(item.date).format('YYYY-MM'))
  const keys=Object.keys(groupDate)
  return{groupDate,keys}

},[currentYearList])


  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" >
            <span className="text" onClick={() => setDateVisible(true)}>
              {currentDate + ''}年账单
            </span>
            {/* 思路：根据当前弹框打开的状态控制expand类名是否存在 */}
            <span className={classNames('arrow', datevisible && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{yearResult.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{yearResult.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{yearResult.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={datevisible}
            onCancel={() => setDateVisible(false)}
            onConfirm={onConfirm}
            onClose={() => setDateVisible(false)}
            max={new Date()}
          />
        </div>
        {/* 实现单日列表统计 */}
        {/* {
          dayGroup.keys.map(key=>{
            return <DailyBill key={key} date={key} billList={dayGroup.groupDate[key]}></DailyBill>
          })
        } */}
        {monthGroup.keys.map(key=>{
          return <DailyBill key={key} date={key} billList={monthGroup.groupDate[key]}/>
        })}
      </div>
    </div >
  )
}

export default Month